import { useEffect } from 'react';
import { Route, Routes } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { setUser } from './store/authactions';
import './App.css';
import MyLayout from './layout';
import MainPage from './views/mainpage';
import NotFound from './component/notfound';
import BookList from './views/speech/firstPage';
import SpeechFirstPage from './views/speech/firstPage';
import SpeechSecondPage from './views/speech/secondPage';
import SpeechThirdPage from './views/speech/thirdPage';
import SpeechReport from './views/speech/report';
import Word from "./views/word/index.jsx";
import PrivateRoute from './component/PrivateRoute.jsx';
import ArticleList from './views/article/List/ArticleList.jsx';
import Favorites from './views/article/Article/Favourites.jsx';
import TranslateArticle from './views/article/Translate/TranslateArticle.jsx';
import ArticleDetail from './views/article/ArticleDetail.jsx';
import Commonuser_AccountManagement from './views/userprofile/index.jsx';
import Progress from './views/progress/index.jsx';
import DailyGoal from './views/progress/DailyGoal.jsx';
import CourseSelection from './views/progress/CourseSelection.jsx';
import ChartPage from './views/progress/chartpage.jsx';

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

function App() {
  const userInfo = useSelector(state => state.auth.userInfo);
  const dispatch = useDispatch();

  useEffect(() => {
    const cookieUserInfo = getCookie('userInfo');

    if (cookieUserInfo) {
      // 将用户信息存储到Local Storage
      localStorage.setItem('userInfo', decodeURIComponent(cookieUserInfo));

      // 派发用户信息到Redux store
      dispatch(setUser(JSON.parse(decodeURIComponent(cookieUserInfo))));

      // 清除Cookie
      document.cookie = `userInfo=; path=/; domain=localhost; expires=Thu, 01 Jan 1970 00:00:00 UTC;`;
    } else {
      const localUserInfo = JSON.parse(localStorage.getItem('userInfo'));

      if (localUserInfo) {
        // 如果Cookie中没有用户信息，使用Local Storage中的用户信息
        dispatch(setUser(localUserInfo));
      }
    }
  }, [dispatch]);

  return (
    <div>
      <Routes>
        {/* Protected routes */}
        <Route path="/" element={<PrivateRoute><MyLayout userInfo={userInfo} /></PrivateRoute>}>
          <Route index element={<MainPage />} />
          <Route path='/mainpage' element={<MainPage />} />
          <Route path="/speech" element={<BookList />} />
          <Route path="/word" element={<Word />} />
          <Route path="/userprofile" element={<Commonuser_AccountManagement />} />
          <Route path="/dialogue/chapter:id" element={<SpeechFirstPage />} />
          <Route path="/dialogue/:bookId/chapter" element={<SpeechSecondPage />} />
          <Route path="/dialogue/:bookId/chapter/:chapterId/sentence" element={<SpeechThirdPage />} />
          <Route path="/dialogue/:bookId/chapter/:chapterId/report" element={<SpeechReport />} />
          <Route path="/reading/" element={<ArticleList />} />
          <Route path="/reading/favorites" element={<Favorites />} />
          <Route path="/reading/translate" element={<TranslateArticle />} />
          <Route path="/reading/article/:article_id" element={<ArticleDetail />} />  {/* 文章详情页面 */}
          <Route path="/progress" element={<Progress />} /> {/* 主页面 */}
          <Route path="/DailyGoal" element={<DailyGoal />} />
          <Route path="/Course-Selection" element={<CourseSelection />} />
          <Route path="/chartPage" element={<ChartPage />} /> {/* 图表页面 */}
        </Route>

        {/* Catch-all for unmatched routes */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
}


export default App;